<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>创建社团</title>
    <script type="text/javascript" src="${ctx}/static/js/jsAddress.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/upload.js"></script>
    <link href="${ctx}/static/datetimepicker/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          media="screen">
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/bootstrap-datetimepicker.js"
            charset="UTF-8"></script>
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/locales/bootstrap-datetimepicker.zh-CN.js"
            charset="UTF-8"></script>
    <script type="text/javascript">
        var qntoken = "";
        $.getJSON("${ctx}/api/common/qiniu/token",function(json){
            qntoken = json.data.token;
        });

        //上传图片
        function uploadImg(){
            /* myUpload({
             uploadUrl:"${base}/admincp/ads/ads-image.action",
             fieldName:"img",
             onFinish:function(v){
             $("#himg").val(v);
             $("#imgShow").attr("src",v);
             },
             checkType:function(fix){
             console.info(fix);
             var f = fix.toLowerCase();
             if(f!="gif"&&f!="jpg"&&f!="png"){
             return false;
             }

             return true;
             }
             }); */


            QiniuUpload({
                prefix:"group_",
                token:qntoken,
                successBack:function(json){
                    if(json.key){
                        var v = "http://img.dakaqi.cn/"+json.key
                        $("#himg").val(v);
                        alert($("#himg").val());
                        $("#imgShow").attr("src",v);
                    }else{
                        alert("上传图片出错！");
                    }
                }
            });
        }
        //上传图片
        function uploadLogo(){
            /* myUpload({
             uploadUrl:"${base}/admincp/ads/ads-image.action",
             fieldName:"img",
             onFinish:function(v){
             $("#himg").val(v);
             $("#imgShow").attr("src",v);
             },
             checkType:function(fix){
             console.info(fix);
             var f = fix.toLowerCase();
             if(f!="gif"&&f!="jpg"&&f!="png"){
             return false;
             }

             return true;
             }
             }); */


            QiniuUpload({
                prefix:"group_",
                token:qntoken,
                successBack:function(json){
                    if(json.key){
                        var v = "http://img.dakaqi.cn/"+json.key
                        $("#logo").val(v);
                        $("#logoimgShow").attr("src",v);
                    }else{
                        alert("上传图片出错！");
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="content">
    <c:if test="${not empty message}">
        <div class="alert alert-success alert-dismissable" style="text-align: center;">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
            </button>
                ${message}
        </div>
    </c:if>

    <form id="inputForm" action="${ctx}/group${action}" method="post" class="form-horizontal">
        <input type="hidden" name="id" value="${newGroup.id}"/>

        <div class="form-group">
            <h3 class="item-title">基础信息</h3>

            <div class="form-item">
                <label for="">社团全称</label>
                <input type="text" class="form-control" id="name" name="name" value="${newGroup.name}" placeholder="" required="">
            </div>
            <div class="form-item">
                <label for="">社团简称</label>
                <input type="text" class="form-control" id="shortName" name="shortName" value="${newGroup.shortName}"
                       placeholder="" required="">
            </div>

            <div class="form-item">
                <label for="">社团LOGO</label>

                <div class="form-item-image-upload">
                    <div class="image-preview-box">
                        <c:if test="${newGroup.logo == null}">
                            <img alt="" src="${ctx}/static/assets/160x160.png" onclick="uploadLogo();" id="logoimgShow" >
                        </c:if>
                        <c:if test="${newGroup.logo != null}">
                            <img alt="" src="${newGroup.logo}" onclick="uploadLogo();" id="logoimgShow" >
                        </c:if>
                    </div>
                    <input id="logo" type="hidden" name="logo" value="${newGroup.logo}"/>
                    <p class="help-block">你可以上传 JPG、JPEG、GIF、PNG 或 BMP 文件。</p>
                    <p class="help-block">文件大小请控制在200K以内</p>
                </div>
            </div>

        </div>
        <!--
        <div class="form-group">
            <h3 class="item-title">负责人</h3>

            <div class="form-item">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="monitor" name="monitor" value="${newGroup.monitor}"
                       placeholder="" value="">
            </div>
            <div class="form-item">
                <label for="">联系电话</label>
                <input type="text" class="form-control" id="phone" name="phone" value="${newGroup.phone}"
                       placeholder="">
            </div>
        </div>
        -->
        <div class="form-group">
            <h3 class="item-title">社团信息</h3>

            <div class="form-item">
                <label for="">所在地区</label>

                <div class="region">
                    <div class="form-item" style="display: none;">
                        <select class="form-control" id="cmbProvince" name="province"></select>
                    </div>
                    <div class="form-item">
                        <select class="form-control" id="cmbCity" name="city"></select>
                    </div>
                    <div class="form-item">
                        <select class="form-control" id="cmbArea" name="district"></select>
                    </div>
                    <script type="text/javascript">
                        addressInit('cmbProvince', 'cmbCity', 'cmbArea', '${newGroup.province}', '${newGroup.city}', '${newGroup.district}');
                    </script>
                </div>
            </div>
            <div class="form-item">
                <label for="">详细地址</label>
                <input type="text" class="form-control" id="regAddress" name="regAddress" value="${newGroup.regAddress}"
                       placeholder="" value="" required="">
            </div>
            <!--
            <div class="form-item">
                <label for="">邮编</label>
                <input type="text" class="form-control" id="" placeholder="" value="">
            </div>
            <div class="form-item">
                <label for="">成立日期</label>
                    <input class="form-control" size="16" type="text" id="setupDate" name="setupDate" value="${newGroup.setupDate}" readonly>
                    <script type="text/javascript">
                        $("#setupDate").calendar();
                    </script>
            </div>
            -->
            <div class="form-item">
                <label for="dtp_input2">成立日期</label>

                <div id="startDate" class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd"
                     data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" id="setupDate" name="setupDate" value="${newGroup.setupDate}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" required=""/><br/>
            </div>


            <div class="form-item">
                <label class="form-item-title" for="">服务领域</label>
                <c:forEach items="${userServiceFiled}" var="skill">
                    <div class="checkbox checkbox-item">
                            <label><input type="checkbox" id="serviceField" name="serviceField" <c:if test="${newGroup.serviceField.contains(skill.name)}"> checked</c:if>
                                          value="${skill.name}"> ${skill.name}</label>

                    </div>
                </c:forEach>
            </div>
        </div>
        <div class="form-group">
            <h3 class="item-title">机构注册信息</h3>

            <div class="form-item">
                <label for="">机构代码</label>
                <input type="text" class="form-control" id="code" name="code" value="${newGroup.code}" placeholder=""
                       value="">
            </div>
            <!--
            <div class="form-item">
                <label for="">机构代码证</label>

                <div class="form-item-image-upload">
                    <div class="image-preview-box">
                        <c:if test="${newGroup.codeImg == null}">
                            <img alt="" src="${ctx}/static/assets/160x160.png" onclick="uploadImg();" id="imgShow" >
                        </c:if>
                        <c:if test="${newGroup.codeImg != null}">
                            <img alt="" src="${newGroup.codeImg}" onclick="uploadImg();" id="imgShow" >
                        </c:if>
                    </div>
                    <input id="himg" type="hidden" name="codeImg" value="${newGroup.codeImg}"/>
                    <p class="help-block">你可以上传 JPG、JPEG、GIF、PNG 或 BMP 文件。</p>
                </div>
            </div>
            -->
        </div>

        <div class="form-group">
            <div class="form-item">
                <label for="">简介</label>
                <textarea class="form-control" id="demo" name="demo" required="">${newGroup.demo}</textarea>
            </div>
        </div>
        <div>
            <button class="btn" type="submit">保存</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    $('#startDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        endDate:new Date(),
        forceParse: 0
    });
    </script>
</body>
</html>